<template>
  <div id="app">
    <router-view></router-view>
    <footer>
      <ul>
        <router-link to="/" tag="li" exact class="item-home" active-class="item-home-active">
          <div></div>
          <span>首页</span>
        </router-link>
        <router-link to="/categories" tag="li" class="item-categories" active-class="item-categories-active">
          <div></div>
          <span>分类</span>
        </router-link>
        <router-link to="/integralIndex" tag="li" class="item-integralIndex" active-class="item-integralIndex-active">
          <div></div>
          <span>松鼠币商城</span>
        </router-link>
        <router-link to="/shoppingCart" tag="li" class="item-shoppingCart" active-class="item-shoppingCart-active">
          <div></div>
          <span>购物车</span>
          <div class="productSum" v-if="showProductSum>0">{{showProductSum}}</div>
        </router-link>
        <router-link to="/user" tag="li" class="item-user" active-class="item-user-active">
          <div></div>
          <span>个人中心</span>
        </router-link>
      </ul>
    </footer>
  </div>
</template>

<script>
export default {
  name: 'app',
  data() {
    return {
      // clientWidth: document.documentElement.clientWidth ||
      // document.body.clientWidth,
    }
  },
  computed:{
      showProductSum(){                  
          return this.$store.getters.productSum;
      }   
  }
  // mounted() {
  //   var event = "onorientationchange" in window ? "orientationchange" : "resize";
  //   var doc = document.documentElement || document.body;
  //   window.addEventListener(event, _resize, false);
  //   window.addEventListener("DOMContentLoaded", _resize);
  //   var that = this;
  //   function _resize() {
  //     that.clientWidth = doc.clientWidth;
  //   }
  // },
  // watch: {
  //   clientWidth(val) {
  //     if (val > 560) {
  //       document.body.style.fontSize = "10px";
  //     } else {
  //       document.body.style.fontSize = 10 * (val / 560) + "px";     
  //     }
  //     console.log(document.body.style.fontSize);
  //   }
  // }
}
</script>
<style>
@import "../static/css/base.css";
#app {
  width: 100%;
  height: 100vh;
}

footer {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  height:0.8rem;
  background: white;
  font-size: 0.12rem;
  border-top: 1px solid #B2B2B2;
  z-index: 2;
}

footer ul {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: space-around;
}

footer ul li {
  /*width: 1.12rem;*/
  width: 20%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

footer ul li div {
  width: 100%;
  height: 0.32rem;
}

footer ul li span {
  font-size: 0.14rem;
  color: rgb(88, 88, 88);
}

.item-home div {
  background: url("../static/img1/icon-home.png") no-repeat center;
  background-size: 0.321rem auto;
}

.item-categories div {
  background: url("../static/img1/icon-classify.png") no-repeat center;
  background-size: 0.321rem auto;
}

.item-integralIndex div {
  background: url("../static/img1/icon-privilege.png") no-repeat center;
  background-size: 0.321rem auto;
}
.item-shoppingCart{
  position: relative;
}
.item-shoppingCart div:first-child {
  background: url("../static/img1/icon-cart.png") no-repeat center;
  background-size: 0.321rem auto;
}

.item-user div {
  background: url("../static/img1/icon-profile.png") no-repeat center;
  background-size: 0.321rem auto;
}

.item-home-active div {
  background: url("../static/img1/icon-home-active.png") no-repeat center;
  background-size: 0.321rem auto;
}

.item-home-active span {
  color: rgb(119, 188, 31);
}

.item-categories-active div {
  background: url("../static/img1/icon-classify-active.png") no-repeat center;
  background-size: 0.321rem auto;
}

.item-categories-active span {
  color: rgb(119, 188, 31);
}

.item-integralIndex-active div {
  background: url("../static/img1/icon-privilege-active.png") no-repeat center;
  background-size: 0.321rem auto;
}

.item-integralIndex-active span {
  color: rgb(119, 188, 31);
}
.item-shoppingCart-active div:first-child {
  background: url("../static/img1/icon-cart-active.png") no-repeat center;
  background-size: 0.321rem auto;
}
.item-shoppingCart-active span {
  color: rgb(119, 188, 31);
}
.item-user-active div {
  background: url("../static/img1/icon-profile-active.png") no-repeat center;
  background-size: 0.321rem auto;
}
.item-user-activ span {
  color: rgb(119, 188, 31);
}
.productSum{
  position: absolute;
  right:0.3rem;
  top: 0.1rem;
  background:#ff9601;
  color:#fff;
  width: 0.2rem;
  height: 0.2rem;
  line-height: 0.2rem;
  text-align:center;
  border-radius: 50%;
}
</style>
